<template>
    <keep-alive>
        <div class="orderbox">
        <div @click="change()" class="ordertop" >
            <h3>我的订单</h3>
            <div class="all">
                <span>查看全部</span>
                <van-icon name="arrow" />
            </div>
        </div>
        <div class="orderbottom">
            <div class="box" v-for="(item, index) in arr" :key="index" @click="change()">
                <img :src="item.pic" alt="">
                <span>{{ item.text }}</span>
            </div>
        </div>
        </div>
    </keep-alive>
  
</template>

<script>
export default {
    data() {
        return {
            arr:[
                { pic: 'https://res.suning.cn/project/msinode/wap/home/image/order-icon01.png', text: '待支付' },
                { pic: 'https://res.suning.cn/project/msinode/wap/home/image/order-icon02.png', text: '待收货' },
                { pic: 'https://res.suning.cn/project/msinode/wap/home/image/order-icon03.png', text: '评价有礼' },
                { pic: 'https://res.suning.cn/project/msinode/wap/home/image/order-icon04.png', text: '退换/售后' },
                { pic: 'https://res.suning.cn/project/msinode/wap/home/image/order-icon05.png', text: '常购清单' }
            ]
        }
    },
    methods: {
        change() {
            this.$router.push("/Orders");
        }
    }
}
</script>

<style lang="scss" scoped>
.orderbox{
    width: 3.52rem;
    height: 1.3rem;
    margin: 0.43rem 0.13rem 0.1rem 0.13rem;
    background-color: #ffffff;
    box-sizing: border-box;
    border-radius: 0.07rem;
    overflow: hidden;
    .ordertop{
        display: flex;
        justify-content: space-between;
        margin: 0.13rem 0.12rem 0.22rem 0.13rem;
        h3{
            font-size: 0.15rem;
        }
        .all{
            font-size: 0.12rem;
            .van-icon-arrow{
                background-color:#f4bf1c ;
                border-radius: 50%;
                padding: 0.01rem;
                margin-left: 0.02rem;
                text-align: center;
            }
        }
    }
    .orderbottom{
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        img{
            width: 0.3rem;
            height: 0.3rem;
        }
        .box{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 0.4rem;
        }
        span{
            font-size: 0.12rem;
        }
    }
}
</style>